<template lang="pug">
el-dialog(
  :visible.sync="show"
  width="560px"
  @open="beforeOpen"
  :before-close="handleClose"
  custom-class="dialog-border"
  :close-on-click-modal="false"
)
  .modal-title(slot="title") 编辑分类
  .modal-content
    el-form(:model="form", :rules="currentKey === 'first' ? firstRules : otherRules" ref="ruleForm" label-width="100px")
      el-form-item(label="分类名称" prop="classificationName")
        el-input(v-model="form.classificationName" maxlength="10" placeholder="请输入分类名称")
      el-form-item(label="分类编码" prop="classificationCode" v-if="currentKey === 'first'")
        el-input(v-model="form.classificationCode" placeholder="请输入分类编码")
      el-form-item(label="分类权重" prop="value")
        el-input(v-model="form.value" type="number" placeholder="请输入分类权重")
  .modal-footer(slot="footer")
    el-button(size="small" @click="handleClose") 取消
    el-button(size="small" type="primary" @click="confirm") 确定
</template>

<script>
import { updateClassifications } from 'api'
export default {
  name: 'categoryDialog',
  props: {
    show: Boolean,
    currentKey: String,
    item: Object
  },
  data () {
    let validateValue = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入分类编码'))
      } else {
        if (value < 0) {
          callback(new Error('权重必须大于等于0'))
        }
        callback()
      }
    }
    return {
      form: {
        classificationName: '',
        classificationCode: '',
        value: ''
      },
      firstRules: {
        classificationName: [
          { required: true, message: '请输入分类名称', trigger: ['blur', 'change'] }
        ],
        classificationCode: [
          { required: true, message: '请输入分类编码', trigger: ['blur', 'change'] }
        ],
        value: [
          { required: true, validator: validateValue, trigger: ['blur', 'change'] }
        ]
      },
      otherRules: {
        classificationName: [
          { required: true, message: '请输入分类名称', trigger: ['blur', 'change'] }
        ],
        classificationCode: [
          { required: true, message: '请输入分类编码', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  methods: {
    beforeOpen () {
      const { classificationId, classificationName, classificationCode, value } = this.item.attr
      this.form = { classificationId, classificationName, classificationCode, value }
    },
    handleClose () {
      this.$emit('close')
    },
    confirm () {
      this.$refs.ruleForm.validate(async (valid) => {
        try {
          if (valid) {
            let query = { ...this.form }
            if (this.currentKey !== 'first') delete query.value
            await this.$axios.post(updateClassifications, { ...this.form })
            this.$message.success('修改成功！')
            this.$emit('confirm', { ...this.form, key: this.currentKey })
          }
        } catch (err) {
          console.log(err)
          this.$message.error(err.message || err.ResultSet.errors)
        }
      })
    }
  }
} 
</script>

<style lang="scss" scoped>
.modal-title {
  font-weight: bold;
  font-size: 16px;
  line-height: 24px;
  color: #3E4373;
}
</style>
